<template>
  <div class="demo-drawer__content-detail mt10">
    <div class="examineTitle mb20">
      流程
    </div>
    <!--            style: item.assignedType == 'CC' ? 2 : 1, // 1 审核 2 抄送-->
    <template v-for="(item, index) in dataList">
      <div :key="index" class="log-list-top mb10" v-if="item.style==1">
        <div class="conent-log">
          <div class="conent-log-l">
            <div class="conent-log-l-list mb5" v-for="users in item.users">
              <img src="@/assets/images/userdefult.jpg" alt="">
              <div class="conent-log-l-in">
                <p>{{ item.name }}</p>
                <p class="conent-log-examine">
                  <span>{{ users.nickName }}({{ users.examineOption.statusName }})</span>
                  <span>{{ users.examineOption.updateTime || '' }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <span class="line-list-l"></span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ['logList', 'userLog'],
  name: "detailLog",
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    logList() {
      this.checkData()
    },
    userLog() {
      this.checkData()
    }
  },
  created() {
    this.checkData()
  },
  methods: {
    checkData() {
      if (this.logList && this.userLog) {
        let list_ = {}
        for (let item of this.userLog) {
          if (list_[item.userId]) {
            list_[item.userId][item.logId] = item
          } else {
            list_[item.userId] = {}
            list_[item.userId][item.logId] = item
          }
        }
        let next_ = true
        for (let item of this.logList) {
          for (let user of item.users) {
            if (list_[user.userId] && list_[user.userId][item.id]) {
              if (list_[user.userId][item.id].isExamine == 2) {
                // 有一层驳回了
                next_ = false
                list_[user.userId][item.id].statusName = '驳回'
              } else {
                list_[user.userId][item.id].statusName = '通过'
              }
              user.examineOption = list_[user.userId][item.id]
            } else {
              if (!next_) {
                user.examineOption = {statusName: '终止'}
              } else {
                user.examineOption = {statusName: '审批中'}
              }
            }
          }
        }
        this.dataList = this.$deepCopy(this.logList)
      }
    }
  }
}
</script>

<style scoped>

.conent-log-l-list {
  display: flex;
  font-size: 12px;
}

.conent-log-l-list p {
  margin: 0;
}

.conent-log-l-list img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-right: 10px;
}

.conent-log-l-in p:last-child {
  color: #999;
}

.line-list-l {
  width: 3px;
  height: 24px;
  background: #eee;
  display: block;
  margin-left: 15px;
}

.log-list-top:last-child .line-list-l {
  display: none;
}

.conent-log-l-in {
  flex: 1;
}

.conent-log-examine {
  display: flex;
  align-items: center;
}

.conent-log-examine span:first-child {
  flex: 1;
}
</style>
